<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
<!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="开始日"
									name="start" id="start">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input class="layui-input" autocomplete="off" placeholder="截止日"
									name="end" id="end">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<input type="text" name="username" placeholder="请输入用户名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit="" lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-body ">
						<!-- url:'./user.json' 替换成我们自己的后端接口的地址，返回一个user.json中的内容"格式" -->
						<table class="layui-table"
							lay-data="{url:'../ajaxuser.do',page:true,toolbar: '#toolbarDemo',id:'test'}"
							lay-filter="test">
							<thead>
								<tr>
									<th lay-data="{type:'checkbox'}">ID</th>
									<th lay-data="{field:'userid', width:80, sort: true}">用户编号</th>
									<th
										lay-data="{field:'username', width:120, sort: true, edit: 'text'}">用户名</th>
									<th lay-data="{field:'userpwd', edit: 'text', minWidth: 150}">密码(会隐藏掉)</th>
									<th lay-data="{field:'usersex', width:80,templet: '#switchTpl'}">性别</th>
									<th lay-data="{field:'userphone', edit: 'text', width: 150}">电话号码</th>
									<th
										lay-data="{field:'userstate',width:120, sort: true, edit: 'text'}">状态</th>

									<th lay-data="{field:'', width:150,templet: '#opTpl'}">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/html" id="opTpl">
									<a
										onclick="member_stop(this,'10001')" href="javascript:;"
										title="启用"> <i class="layui-icon">&#xe601;</i>
									</a> <a title="编辑"
										onclick="xadmin.open('编辑','member-edit.html',600,400)"
										href="javascript:;"> <i class="layui-icon">&#xe642;</i>
									</a> <a
										onclick="xadmin.open('修改密码','member-password.html',600,400)"
										title="修改密码" href="javascript:;"> <i class="layui-icon">&#xe631;</i>
									</a> <a title="删除" onclick="member_del(this,'要删除的id')"
										href="javascript:;"> <i class="layui-icon">&#xe640;</i>
									</a>
    </script>
<!-- 
<script type="text/html" id="toolbarDemo">
        <div class = "layui-btn-container" > 
            <button class = "layui-btn layui-btn-sm" lay-event = "getCheckData" > 获取选中行数据 </button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button > 
            <button class = "layui-btn layui-btn-sm" lay-event = "isAll" > 验证是否全选</button>
        </div > 
    </script> 
    -->
<script type="text/html" id="switchTpl">
        <!-- 这里的checked的状态只是演示 -->
        <input type = "checkbox" name = "usersex" value = "{{d.id}}" lay-skin = "switch" lay-text = "女|男" lay-filter = "sexDemo" {{ d.usersex == '女' ? 'checked': ''}} >
    </script>
<script>
	layui.use('laydate', function() {
		var laydate = layui.laydate;

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});

	});
</script>
<script>
	layui.use('table', function() {
		var table = layui.table;

		//监听单元格编辑
		table.on('edit(test)', function(obj) {
			var value = obj.value //得到修改后的值
			, data = obj.data //得到所在行所有键值
			, field = obj.field; //得到字段
			layer.msg('[ID: ' + data.id + '] ' + field + ' 字段更改为：' + value);
		});

		//头工具栏事件
		table.on('toolbar(test)', function(obj) {
			var checkStatus = table.checkStatus(obj.config.id);
			switch (obj.event) {
			case 'getCheckData':
				var data = checkStatus.data;
				layer.alert(JSON.stringify(data));
				break;
			case 'getCheckLength':
				var data = checkStatus.data;
				layer.msg('选中了：' + data.length + ' 个');
				break;
			case 'isAll':
				layer.msg(checkStatus.isAll ? '全选' : '未全选');
				break;
			}
			;
		});
	});
</script>
<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(hm, s);
	})();
</script>

</html>